/**
 * Created by liubin on 2015/09/28.
 */
'use strict';

import Joi from 'joi';
import React from 'react';
import { connectReduxForm } from 'redux-form';
import JoiOption from '../tools/joiOption';
import joiValidator from '../tools/joiValidator';
import ValidateComponent from 'common/validateComponent';

const schema = {
    userId: JoiOption(Joi.string().required().label('用户ID')),
    name: JoiOption(Joi.string().required().label('用户名')),
    roleId: JoiOption(Joi.number().label('权限')),
    password: JoiOption(Joi.string().required().label('密码')),
    repeatPwd: JoiOption(Joi.any().valid(Joi.ref('password')).required().label('重复密码'), {
        language: {
            any: {
                allowOnly: '俩次密码输入不一致'
            }
        }

    })
};

@connectReduxForm({
    form: 'userAdd',
    fields: ['userId', 'name', 'roleId', 'password', 'repeatPwd'],
    //asyncValidate: joiValidatorAsync(loginSchema)
    validate: joiValidator(schema)
})
class UserAddForm extends ValidateComponent {
    static propTypes = {
        //roleCombo: React.PropTypes.object.isRequired,
        handleSubmit: React.PropTypes.func.isRequired
    }
    render() {
        const { fields: { userId, name, roleId, password, repeatPwd}, handleSubmit,handleBack, roleStore } = this.props;
        console.log(roleId);
        console.log(roleStore.get('comboList').toJS());
        roleStore.get('comboList').map(item => {
            console.log(item);
        })
        return (
            <Form onSubmit={handleSubmit}>
                <FormGroup success={this.getSuccess(userId)} error={this.getError(userId)}>
                    <Label control sm={2} htmlFor='userId'>登陆ID</Label>
                    <Col sm={10}>
                        <Input type='text' id='userId' {...userId} placeholder='请输入用户ID' />
                        <HelpBlock>{this.getMessage(userId)}</HelpBlock>
                    </Col>
                </FormGroup>
                <FormGroup success={this.getSuccess(name)} error={this.getError(name)}>
                    <Label control sm={2} htmlFor='name'>用户名</Label>
                    <Col sm={10}>
                        <Input type='text' id='name' {...name} placeholder='请输入用户名' />
                        <HelpBlock>{this.getMessage(name)}</HelpBlock>
                    </Col>
                </FormGroup>
                <FormGroup success={this.getSuccess(roleId)} error={this.getError(roleId)}>
                    <Label control sm={2} htmlFor='roleId'>权限</Label>
                    <Col sm={10}>
                        <Select id='roleId' {...roleId}>
                            {roleStore.get('comboList').map(item => <option key={item.get('id')} value={item.get('id')}>{item.get('name')}</option>)}
                        </Select>
                        <HelpBlock>{this.getMessage(roleId)}</HelpBlock>
                    </Col>
                </FormGroup>
                <FormGroup success={this.getSuccess(password)} error={this.getError(password)}>
                    <Label control sm={2} htmlFor='password'>密码</Label>
                    <Col sm={10}>
                        <Input type='password' id='password' {...password} placeholder='请输入密码' />
                        <HelpBlock>{this.getMessage(password)}</HelpBlock>
                    </Col>
                </FormGroup>
                <FormGroup success={this.getSuccess(repeatPwd)} error={this.getError(repeatPwd)}>
                    <Label control sm={2} htmlFor='repeatPwd'>重复密码</Label>
                    <Col sm={10}>
                        <Input type='password' id='repeatPwd' {...repeatPwd} placeholder='请再输入密码' />
                        <HelpBlock>{this.getMessage(repeatPwd)}</HelpBlock>
                    </Col>
                </FormGroup>
                <Col xs={12} className='text-right' style={{marginBottom: 10}}>
                    <ButtonToolbar style={{display: 'inline-block'}} >
                        <Button type='button' bsStyle='default' onClick={handleBack}>取消</Button>
                        <Button type='submit' bsStyle='primary'>提交</Button>
                    </ButtonToolbar>
                </Col>
            </Form>
        );
    }
}

export default UserAddForm;